<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
    <style media="screen">
    .my-panel {width:80%; position:absolute; z-index:100; left:50%; top:100px; margin-left:-40%; display:none;}
    .my-panel-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.6; z-index:99; display:none;}

    .my-dialog {width:300px; position:absolute; z-index:100; left:50%; top:200px; margin-left:-150px; display:none;}
    .my-dialog-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.3; z-index:99; display:none;}
    </style>
  </head>
  <body>
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">页面1</a></li>
      <li role="presentation"><a href="#">页面2</a></li>
      <li role="presentation"><a href="#">页面3</a></li>
    </ul>
    <!--表格-->
    <% if(type=='view'){ %>
    <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>图片地址</th>
          <th>链接地址</th>
          <th>序号</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% datas.forEach(data=>{ %>
        <tr>
          <td><%=data.ID%></td>
          <td><%=data.title%></td>
          <td><%=data.src%></td>
          <td><%=data.href%></td>
          <td><%=data.serial%></td>
          <td>
            <a
              href="<%=HTTP_ROOT%>/admin/banner/delete/<%=data.ID%>"
              class="btn btn-danger glyphicon glyphicon-trash"
              onclick="return confirm('你是否真的确认要删除')"
            >删除</a>

            <a
              href="<%=HTTP_ROOT%>/admin/banner/modify/<%=data.ID%>"
              class="btn btn-default glyphicon glyphicon-pencil"
            >修改</a>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
    <% } %>

    <!--添加-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          <%=type=='view'?'添加':'修改'%>
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="<%=action%>" method="post" enctype="multipart/form-data">

          <%fields.forEach(field=>{%>
          <div class="form-group">
            <label class="col-sm-2 control-label"><%=field.title%></label>
            <div class="col-sm-10">
              <input type="<%=field.type%>" class="form-control" <%if(type=='modify'){%>value="<%=old_data[field.name]%>"<%}%> name="<%=field.name%>" placeholder="<%=field.title%>">
            </div>
          </div>
          <%})%>

          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>
  </body>
  <script src="<%=HTTP_ROOT%>/js/jquery.min.js" charset="utf-8"></script>
  <script>
  $('#btn_add').click(function (){
    $('.my-panel, .my-panel-shadow').show();
  });
  </script>
  <% if(type=='modify'){ %>
  <script>
  $('.my-panel, .my-panel-shadow').show();
  </script>
  <% } %>
</html>
